// import React from "react";
// import style from "./style.module.css";

// interface PropsType {
//   barrageList: string[];
//   color?: {
//     random: boolean;
//     colorList: string[];
//   };
//   autoPlay: boolean;
// }

// export class Barra extends React.Component<PropsType> {
//   myCanvas: React.RefObject<HTMLCanvasElement>;
//   timer: NodeJS.Timer;
//   constructor(props) {
//     super(props);
//     this.timer = setTimeout(() => ({}));
//     this.myCanvas = React.createRef();
//   }
//   componentDidMount() {
//     const { barrageList, color } = this.props;
//     const canvas = this.myCanvas.current as HTMLCanvasElement;
//     const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
//     ctx.font = "10px 微软雅黑";
//     const width = canvas.width;
//     //get color of all barrage
//     const colorArr = this.getColor(color);
//     //get the initial left for all barrage
//     const numArrL = this.getLeft();
//     //get the initial top for all barrage
//     const numArrT = this.getTop();
//     // get speed of all barrage
//     const speedArr = this.getSpeed();


//     this.timer = setInterval(() => {
//       const { autoPlay } = this.props;
//       if (!autoPlay) return;
//       ctx.clearRect(0, 0, canvas.width, canvas.height);
//       ctx.save();
//       for (let j = 0; j < barrageList.length; j++) {
//         numArrL[j] -= speedArr[j];
//         ctx.fillStyle = colorArr[j];
//         // ctx.fillStyle = 'white';
//         ctx.fillText(barrageList[j], numArrL[j], numArrT[j]);
//         if (numArrL[j] <= -width) {
//           numArrL[j] = canvas.width;
//         }
//       }
//       ctx.restore();
//     }, 16.7);
//     // requestAnimationFrame()
//   }
//   getTop() {
//     const { barrageList } = this.props;
//     const canvas = this.myCanvas.current as HTMLCanvasElement;
//     const height = canvas.height;
//     const len = barrageList.length;
//     const arr = new Array(len).fill(1);
//     return arr.map(() => {
//       const tagHeight = Math.random() * height;
//       if (tagHeight < 0.2 * height) {
//         return 0.2 * height;
//       }
//       if (tagHeight > 0.8 * height) {
//         return 0.8 * height;
//       }
//       return tagHeight;
//     });
//   }
//   getLeft() {
//     const { barrageList } = this.props;
//     const canvas = this.myCanvas.current as HTMLCanvasElement;
//     const width = canvas.width;
//     const len = barrageList.length;
//     return new Array(len).fill(width);
//   }
//   getColor(color?: { random: boolean; colorList: string[] }) {
//     const { barrageList } = this.props;
//     const len = barrageList.length;
//     //random color
//     //the empty will skip，so fill 1 with the all array
//     const arr = new Array(len).fill(1);
//     if(color && color.random) {
//       return arr.map(() => {
//         return color.colorList[Math.floor(Math.random() * color.colorList.length)]
//       });
//     }
//     return arr.map(() => {
//       return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
//     });
//   }
//   getSpeed() {
//     const { barrageList } = this.props;
//     const len = barrageList.length;
//     const arr = new Array(len).fill(1);
//     return arr.map(() => {
//       return parseInt((Math.random() * 8).toString());
//     });
//   }
//   componentWillUnmount() {
//     clearInterval(this.timer);
//   }
//   render() {
//     return (
//       <div className={style["m-barrage"]}>
//         <canvas
//           className={style["m-barrage-canvas"]}
//           ref={this.myCanvas}
//         ></canvas>
//       </div>
//     );
//   }
// }

/***************************************************************************/
import React, { useEffect, useRef } from "react";
import style from "./style.module.css";

interface PropsType {
  barrageList: string[];
  color?: {
    random: boolean;
    colorList: string[];
  };
  autoPlay: boolean;
}

export const Barra: React.FC<PropsType> = ({ barrageList, color, autoPlay }) => {
  const myCanvas = useRef<HTMLCanvasElement>(null);
  const timer = useRef<NodeJS.Timer>();

  useEffect(() => {
    const canvas = myCanvas.current as HTMLCanvasElement;
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
    ctx.font = "10px 微软雅黑";
    const width = canvas.width;

    const getColor = () => {
      const len = barrageList.length;
      const arr = new Array(len).fill(1);

      if (color && color.random) {
        return arr.map(() => color.colorList[Math.floor(Math.random() * color.colorList.length)]);
      }
      
      return arr.map(() => "#" + Math.floor(Math.random() * 0xffffff).toString(16));
    };

    const getTop = () => {
      const height = canvas.height;
      const len = barrageList.length;
      const arr = new Array(len).fill(1);

      return arr.map(() => {
        const tagHeight = Math.random() * height;
        if (tagHeight < 0.2 * height) {
          return 0.2 * height;
        }
        if (tagHeight > 0.8 * height) {
          return 0.8 * height;
        }
        return tagHeight;
      });
    };

    const getLeft = () => {
      const len = barrageList.length;
      const arr = new Array(len).fill(width);

      return arr;
    };

    const getSpeed = () => {
      const len = barrageList.length;
      const arr = new Array(len).fill(1);

      return arr.map(() => parseInt((Math.random() * 8).toString()));
    };

    const colorArr = getColor();
    const numArrL = getLeft();
    const numArrT = getTop();
    const speedArr = getSpeed();

    timer.current = setInterval(() => {
      if (!autoPlay) return;

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();

      for (let j = 0; j < barrageList.length; j++) {
        numArrL[j] -= speedArr[j];
        ctx.fillStyle = colorArr[j];
        ctx.fillText(barrageList[j], numArrL[j], numArrT[j]);

        if (numArrL[j] <= -width) {
          numArrL[j] = canvas.width;
        }
      }

      ctx.restore();
    }, 16.7);

    return () => {
      clearInterval(timer.current);
    };
  }, [barrageList, color, autoPlay]);

  return (
    <div className={style["m-barrage"]}>
      <canvas className={style["m-barrage-canvas"]} ref={myCanvas}></canvas>
    </div>
  );
};

export default Barra;